<template>
  <div class="diary-editor">
    <div class="diary-editor__form">
      <div class="diary-editor__top">
        <input type="text" class="diary-editor__title" placeholder="请输入标题" v-model="diaryForm.title">
        <yk-popover placement="bottomRight" title="选择天气">
          <template #content>
            <yk-space wrap :size="[32, 20]" style="padding: 16px 0 16px 14px;">
              <div class="diary-editor__weather" v-for="item in weather" :key="item.id"
                :class="{ selected: diaryForm.weather_id === item.id }" @click="selectWeather(item.id)">
                <img :src="'/src/assets/' + item.icon" alt="">
              </div>
            </yk-space>
          </template>
          <img :src="'/src/assets/' + weather[diaryForm.weather_id!].icon" alt="">
        </yk-popover>
      </div>
      <yk-text-area v-model="diaryForm.content" placeholder="请输入内容" :max-length="1600"
        :auto-size="{ minRows: 24, maxRows: 24 }">
      </yk-text-area>
      <div class="diary-editor__picture">
        <yk-upload :upload-url="uploadUrl" :file-list="fileList" accept="image/*" @handleSuccess="handleSuccess"
          @handleDelete="deletePhoto"></yk-upload>
      </div>
    </div>
    <div class="diary-editor__foot">
      <yk-space size="s">
        <yk-button type="secondary" @click="cancel">取消</yk-button>
        <yk-button @click="newDiary">新建笔记</yk-button>
      </yk-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { weather } from '@/utils/weather'
import type { DiaryData } from '@/utils/interface'
import { baseUrl } from '@/utils/env';
import { useFile } from '@/hooks/file';
import type { FileData } from '@/utils/interface';
import { useCode } from '@/hooks/code';
import { useUserStore } from '@/stores/user';
import { createDiaryAPI } from '@/api';

const proxy: any = getCurrentInstance()?.proxy

const emits = defineEmits(['diaryData'])

const userStore = useUserStore()
const { tackleCode } = useCode()

const diaryForm = ref<DiaryData>({
  weather_id: 0,
})
// 上传地址
const uploadUrl = `${baseUrl}/upload` // 上传地址

const fileList = ref<{ url: string, id: number }[]>([])


// 上传成功
const handleSuccess = (e: { code: number, data: FileData }) => {
  if (tackleCode(e.code)) {
    const photo = {
      id: e.data.id,
      url: e.data.url
    }
    fileList.value.push(photo)
    // const content = fileList.value.map((obj: any) => JSON.stringify(obj)).join(' ')
  }

}

// 删除图片
const { deleteFile } = useFile()
const deletePhoto = (e: any) => {
  const dFile = fileList.value[e[0]]
  deleteFile(dFile)
  fileList.value.splice(e[0], 1)
}




// 选择天气
const selectWeather = (id: number) => {
  diaryForm.value.weather_id = id
}

// 新建笔记
const newDiary = async () => {
  if (fileList.value.length > 0) {
    diaryForm.value.picture = fileList.value.map((obj: any) => JSON.stringify(obj)).join(' ')
  }
  diaryForm.value.moment = new Date()
  const data = {
    token: userStore.token,
    value: diaryForm.value
  }
  const res: any = await createDiaryAPI(data)
  if (tackleCode(res.code)) {
    // 新建的日记传给父亲
    const data = diaryForm.value
    data.id = res.id
    emits('diaryData', data)
    // 清空内容
    diaryForm.value = {
      weather_id: 0,
      title: '',
      content: '',
      picture: ''
    }
    fileList.value = []
    proxy.$message({ type: 'primary', message: '新建日记成功' })
  }

}

// 取消发布
const cancel = () => {
  // 清空内容
  diaryForm.value = {
    weather_id: 0,
    title: '',
    content: '',
    picture: ''
  }
  fileList.value = []
}

</script>

<style lang="less" scoped>
.diary-editor {
  background: @bg-color-l;
  border-radius: @radius-m;
  width: 100%;

  &__form {
    padding: @space-xl;
  }

  &__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__title {
    font-size: @size-xl;
    font-weight: bold;
    color: @font-color-l;
    padding-bottom: @space-m;
  }

  &__picture {
    padding-top: @space-xl;
  }

  .selected {
    &::before {
      position: absolute;
      bottom: -6px;
      left: 9px;
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 4px;
      background: @pcolor;
    }
  }

  input {
    border: none;
    background: transparent;
    outline: none;

    &::placeholder {
      color: @gray-4;
    }
  }

  &__foot {
    display: flex;
    justify-content: end;
    padding: @space-m;
    border-top: 1px solid @line-color-s;
  }

  .yk-text-area {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  :deep(.yk-text-area__inner) {
    font-size: @size-m;
    line-height: 1.5;

    &::placeholder {
      color: @gray-5;
    }
  }
}
</style>
